<script lang="ts" setup>
import { ref } from 'vue'
import ReDialog from '@/components/ReDialog/index.vue'
import { Message } from '@/utils/message'

import { _addMenu } from '@/api/auth'
import { MenuItem } from '@/api/types'

import { rules } from './index'
const form = {
  parentId: undefined,
  name: '',
  path: '',
  zhName: '',
  component: '',
  icon: '',
  order: 0,
  description: ''
}

const emit = defineEmits(['afterSuccess'])
const dialogVisible = ref(false)
const title = ref('新增菜单')
const formRef = ref()
const formState = ref(form)

/**
 * @param data MenuItem 当前选中的菜单menu
 * @param type 0：新增同级菜单，1：新增子菜单
 */
const show = (data: MenuItem, type: number) => {
  title.value = '新增菜单'
  if (type === 0) {
    formState.value.parentId = data.parentId
  } else {
    formState.value.parentId = data.id
  }
  dialogVisible.value = true
}

const handleClose = () => {
  dialogVisible.value = false
  formRef.value.clearValidate()
  formState.value = { ...form }
}

const submit = () => {
  formRef.value.validate(valid => {
    if (valid) {
      const params = {
        ...formState.value
      }

      _addMenu(params)
        .then(() => {
          Message.success('操作成功')
          emit('afterSuccess')
          handleClose()
        })
        .catch(err => {
          Message.error(err.message)
        })
    }
  })
}
defineExpose({
  show
})
</script>

<template>
  <ReDialog
    v-model="dialogVisible"
    :title="title"
    @before-close="handleClose"
    @submit="submit"
  >
    <el-form
      ref="formRef"
      :model="formState"
      :rules="rules"
      label-position="right"
      label-width="80px"
    >
      <el-form-item label="菜单名称" prop="zhName">
        <el-input
          v-model.trim="formState.zhName"
          placeholder="请输入菜单名称"
          maxlength="32"
          show-word-limit
          clearable
        />
      </el-form-item>
      <el-form-item label="唯一标识" prop="name">
        <el-input
          v-model.trim="formState.name"
          placeholder="请输入菜单唯一标识"
          maxlength="32"
          show-word-limit
          clearable
        />
      </el-form-item>

      <el-form-item label="路径" prop="path">
        <el-input
          v-model.trim="formState.path"
          placeholder="请输入菜单路径"
          maxlength="32"
          show-word-limit
          clearable
        />
      </el-form-item>

      <el-form-item label="图标" prop="icon">
        <el-input
          v-model.trim="formState.icon"
          placeholder="请输入菜单图标"
          maxlength="32"
          show-word-limit
          clearable
        />
      </el-form-item>

      <el-form-item label="组件" prop="component">
        <el-input
          v-model.trim="formState.component"
          placeholder="请输入菜单组件"
          maxlength="32"
          show-word-limit
          clearable
        />
      </el-form-item>

      <el-form-item label="排序" prop="order">
        <el-input
          v-model.trim="formState.order"
          placeholder="请输入菜单排序"
          maxlength="32"
          show-word-limit
          clearable
        />
      </el-form-item>

      <el-form-item label="描述" prop="description">
        <el-input
          v-model="formState.description"
          :rows="2"
          type="textarea"
          placeholder="请输入用户描述"
          maxlength="255"
          show-word-limit
          clearable
        />
      </el-form-item>
    </el-form>
  </ReDialog>
</template>
